<template>
  <view class="page-content">
    <f-navbar title="运输任务" :navbarType="1"> </f-navbar>
    <view style="display: flex; justify-content: center; background-color: #fff">
    </view>

    <view class="search-block flex align-center">
      <view class="flex-sub search-input flex align-center" v-if="showSearch">
        <u-input border="none" v-model="listParams.taskCode" maxlength="20" fontSize="24rpx" placeholder="搜索"
          placeholderStyle="font-size: 24rpx;color: #CCCCCC;" confirmType="search" @confirm="searchList" :clearable="true"
          @clear="searchClear">
          <template slot="prefix">
            <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
          </template>
        </u-input>
      </view>
      <view class="flex-sub search-input flex align-center justify-center" @click="switchSearch(true)" v-else>
        <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
        <text class="margin-left-xs">搜索</text>
      </view>
      <image class="screen-icon" src="@/static/images/common/screen_icon.png" @click="showScreenModal"></image>
    </view>
    <view class="page-content-main">
      <scrollList :list="list" :loadComplete="loadComplete" @pullUpLoad="pullUpLoad" ref="scrollList">
        <view class="order-list">
          <view v-for="item of list" :key="item.id" class="item-info"
            @click="goLink(`/pages/order/transportTask/taskDetail?taskId=${item.id}`)">
            <view class="item-title flex-ac flex-jb l-border-bottom">
              <view class="flex-sub text-cut text-cut1">任务号：{{ item.taskCode }}</view>
              <view>{{getDictionaryName(orderStatusOptions,item.taskStatus)}}</view>
            </view>

            <view class="form l-border-bottom">
              <view class="form-type flex-jb">
                <view>{{ item.startingStationName }}</view>
                <!-- 任务类型：0收运订单、1运输订单 -->
                <!-- <view :class="[item.taskType == 1 ? 'title-tip1' : 'title-tip2']" >收运</view> -->
				<view :class="[item.startingStationType == 1 ? 'title-tip1' : 'title-tip2']" >
					<view  v-if="item.startingStationType == 0">预处理厂</view>
					<view  v-if="item.startingStationType == 1">处理厂</view>
				</view>
				
              </view>
              <view class="form-item" v-if="item.contact">
                <view>联系人：</view>
                <view>{{ item.contact }}</view>
              </view>
              <view class="form-item" v-if="item.contactPhone">
                <view>联系人电话：</view>
                <view>{{ item.contactPhone }}</view>
              </view>
              <view class="form-item" v-if="item.driverName">
                <view>运输司机：</view>
                <view>{{ item.driverName }}
                </view>
              </view>
              <view class="form-item" v-if="item.driverPhone">
                <view>手机号：</view>
                <view>{{ item.driverPhone }}
                </view>
              </view>
              <view class="form-item" v-if="item.licensePlateNumber">
                <view>车牌号：</view>
                <view>{{ item.licensePlateNumber }}
                </view>
              </view>
              <view class="form-item">
                <view>创建时间：</view>
                <view>{{ item.createTime ? item.createTime : "--" }}
                </view>
              </view>
            </view>
            <view class="flex-je">
              <template v-if="true">
                <view v-if="checkPermi(['transportTask:page:list'])" class="button-deep"
                  @click.stop="goLink(`/pages/order/transportOrder/index?taskId=${item.id}`)">
                  订单列表
                </view>
                <template v-if="item.taskStatus == 1 || item.taskStatus == 2">
                  <view v-if="checkPermi(['transportTask:page:cancel'])" class="button-deep" @click.stop="handleCancel(item)">
                    取消
                  </view>
                </template>
                <template v-if="checkPermi(['transportTask:page:eliminate'])">
                  <view  class="button-deep"
                    @click.stop="goLink(`/pages/alarm/handle?taskId=${item.id}`)" v-if="item.processingResults == 0">
                    消错处理
                  </view>
                </template>
              </template>
            </view>
          </view>
        </view>
      </scrollList>
    </view>
    <screenModal :screenType="2" ref="screenModal" @setScreenForm="setScreenForm"
      :orderStatusOptions="orderStatusOptions" :taskOptions="taskOptions"></screenModal>
  </view>
</template>
<script>
import { taskList,taskCancel } from "@/api/collection.js";
import screenModal from "@/components/pageLayout/screenModal/transportTaskModal.vue";
export default {
  components: {
    screenModal,
  },
  data() {
    return {
      showSearch: false,
      listParams: {
        pageNum: 1,
        pageSize: 10,
        taskStatus: '',
        taskType: 1, //任务类型：0收运订单、1运输订单
      },
      list: [],
      loadComplete: true,
      optionItem: {},
      orderStatusOptions: [],
	  taskOptions:[
		  {
			id:0,
			text:'预处理厂'
		  },
		  {
			id:1,
			text:'处理厂'
		  }
	  ],
    };
  },
  async onShow() {
    uni.hideTabBar();
    // 获取字典
    this.orderStatusOptions = await this.getDictionaryData(
      "task_status"
    );
    this.switchSearch(false);
    this.listParams.pageNum = 1;
    this.getList();

  },
  methods: {
    searchList() {
      this.listParams.pageNum = 1
      this.getList()
    },
    handleCancel(item) {
      let that = this
      uni.showModal({
        title: '提示',
        content: '是否确认取消？',
        success: function (res) {
          if (res.confirm) {
            taskCancel(item.id).then(() => {
              that.getList();
              uni.$u.toast("已取消");
            })
          }
        }
      });
    },
    searchClear() {
      this.listParams.taskCode = ''
      this.listParams.pageNum = 1
      this.getList()
    },
    switchSearch(value) {
      this.showSearch = value;
    },
    getList() {
      taskList(this.listParams).then((res) => {
        this.$refs.scrollList.pullUpDone(!1);
        if (this.listParams.pageNum == 1) {
          this.list = res.data.records;
          this.loadComplete = !0;
        } else {
          if (this.list.length == res.data.total) {
            this.$refs.scrollList.pullUpDone(!0);
          } else {
            this.list = [...this.list, ...res.data.records];
          }
        }
      });
    },
    pullUpLoad() {
      this.listParams.pageNum++;
      this.getList();
    },
    showScreenModal() {
      this.$refs.screenModal.showModal();
    },
    setScreenForm(form) {
      this.listParams = {
        ...this.listParams,
        ...form,
        taskStatus: form.orderStatus
      };
	  this.list = []
      this.listParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .order-list {
    padding: 0 30rpx;
  }

  .item-info {
    margin-bottom: 30px;
    padding: 20rpx 30rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;

    .button-deep {
      border-radius: 200rpx;
      padding: 16rpx 0;
      margin: 20rpx 0 0 20rpx;
      width: 171rpx;
      text-align: center;
      background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
      color: #ffffff;
    }

    .item-title {
      padding-bottom: 20rpx;

      view:nth-child(1) {
        font-size: 30rpx;
        color: #000000;
      }

      view:nth-child(2) {
        font-size: 28rpx;
      }
    }

    .form {
      padding: 30rpx 0;
		.title-tip1 {
		  font-size: 24rpx;
		  color: #ffbc1a;
		  // width: 40px;
		  height: 17px;
		  background: rgba(255, 186, 26, 0.2);
		  padding: 0 16rpx;
		  border-radius: 11px;
		}
		
		.title-tip2 {
		  font-size: 24rpx;
		  color: #138e57;
		  // width: 40px;
		  height: 17px;
		  background: rgba(19, 142, 87, 0.2);
		  padding: 0 16rpx;
		  border-radius: 11px;
		}
      .form-type {
        font-size: 32rpx;
        color: #000000;
      }

      .form-item {
        display: flex;
        font-size: 30rpx;
        padding-top: 16rpx;

        view:nth-child(2) {
          color: #000;
        }
      }
    }
  }

  .search-block {
    border-top: 1rpx solid #eeeeee;
    padding: 32rpx;
    background: #f7f7f7;

    .search-input {
      height: 58rpx;
      background: #ffffff;
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #cccccc;
      padding: 0 20rpx;
    }

    .screen-icon {
      width: 50rpx;
      height: 50rpx;
      margin-left: 24rpx;
    }
  }

  &-main {
    position: relative;
    flex: 1;
    overflow: hidden;

    .list-block {
      padding: 0 32rpx;
    }
  }
}
</style>
